<template>
  <div>
    <component
        v-if="column.search.el && column.search.el !== 'search'"
        :is="`el-${column.search.el}`"
        v-bind="column.search.props"
        v-model="searchParam[column.search.key || column.prop]"
        :data="column.search.el === 'tree-select' ? columnEnum : []"
        :options="column.search.el === 'cascader' ? columnEnum : []"
        :placeholder="placeholder(column)"
        :maxlength="column.search.props.maxlength || 30"
        :clearable="clearable(column)"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
    >
      <template #default="{ data }" v-if="column.search.el === 'cascader'">
        <span>{{ data[fieldNames().label] }}</span>
      </template>
      <template v-if="column.search.el === 'select'">
        <component
            :is="`el-option`"
            v-for="(col, index) in columnEnum"
            :key="index"
            :label="col[fieldNames().label]"
            :value="col[fieldNames().value]"
            :disabled="!!col.disabled"
        ></component>
      </template>
      <slot v-else></slot>
    </component>
    <template v-if="column.search.el && column.search.el === 'search'">
      <el-select
          remote
          clearable
          @visible-change="visibleChange"
          @clear="clear"
          reserve-keyword
          v-bind="column.search.props"
          :remote-method="remoteMethod"
          v-model="searchParam[column.search.key || column.prop]"
      >
        <el-option
            v-for="item in columnList"
            :disabled="!!item.disabled"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'SearchFormItem',
  props: {
    pColumn: {
      type: Object,
      default: () => ({})
    },
    pSearchParam: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      columnList: this.pColumn.search.props.defaultList || [],
      column: this.pColumn,
      searchParam: this.pSearchParam,
      // columnEnum: []
    }
  },
  computed: {
    ...mapState(['enumMap']),
    columnEnum() {
      if (!this.enumMap[this.pColumn.prop]) return [];
      return this.enumMap[this.pColumn.prop];
    },
  },
  // watch: {
  //   enumMap: {
  //    deep: true,
  //    handler(newValue) {
  //       console.log('newValue', newValue)
  //     }
  //   }
  // },
  methods: {
    fieldNames() {
      if (this.column.fieldNames && this.column.fieldNames.label) {
        return {
          label: this.column.fieldNames.label,
          value: this.column.fieldNames.value
        }
      } else {
        return {
          label: 'label',
          value: 'value'
        }
      }
    },
    remoteMethod(query) {
      const searchProp = this.column.search;
      if (query) {
        if (searchProp.props.remotemethod) {
          searchProp.props.remotemethod(query).then((data) => {
            this.columnList = data;
          });
        }
      }
    },
    visibleChange(flag) {
      flag && (this.columnList = []);
    },
    clear() {
      this.columnList = []
    },
    placeholder(column) {
      if (column.search && column.search.props && column.search.props.placeholder) {
        return column.search.props.placeholder
      } else {
        return column.search.el === 'input' ? '请输入' : '请选择';
      }
    },
    clearable(column) {
      if (column.search) {
        if (column.search.props && column.search.props.clearable) {
          return column.search.props.clearable
        } else {
          return (column.search.defaultValue == null || column.search.defaultValue == undefined);
        }
      }
    }
  },
}
</script>
<style scoped lang="scss">
.el-date-editor--daterange{
  width: 100%;
}
</style>